<html>
    <head>
        <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
        
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script type="text/javascript" src="NKit.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
      
            <script type="text/javascript">
            // Give Page a NKNavigationController Title
            var navController = new NKNavigationController();
            navController.setTitle("NKModalWindow");
            </script>
            
    </head>
    
    <body>
        
        <script type="text/javascript">
            // Modal Example 1 ==========================================================
            function showModal1()
            {
                modal1 = new NKModalWindow();
                modal1.setAlpha(0.8)							// Sets alpha (opacity) to 0.8
                modal1.setFrame(0,0,320,480)					// Set Frame to cover whole screen
                modal1.show();									// Show the modal window
                
                var indicator1 = new NKActivityIndicator();
                indicator1.init(150, 165, 20, "white");			// Set up a white spinning indicator
                indicator1.show();								// Show spinner
                indicator1.spin();								// Make it spin
                modal1.addControl(indicator1);					// Add spinner to modal
                
                var label1 = new NKLabel();
                label1.init(110, 110, 140, 25, "Doing Stuff...");   // Set up a NKLabel to display text
                label1.setTextColor(255, 255, 255);                 // Set Text Color
                modal1.addControl(label1);                          // Add the label to the modal
                label1.show();                                      // Show the label
                
                var button1 = new NKButton();
                button1.init(90, 280, 150, 24, "modal1.dismiss()"); // Button to dismiss modal
                button1.setTitle("Cancel");                         // Button Text
                modal1.addControl(button1);                         // Add button to modal
                button1.show();                                     // Show the button
            }
            
            // Modal Example 2 ==========================================================
            function showModal2()
            {
                modal2 = new NKModalWindow();
                modal2.setAlpha(0);                                 // 0 Opacity - we're only using the image for shape here
                modal2.setFrame(0,0,320,480);                       // Frame covers whole screen, but is transparant
                modal2.show();
                
                var indicator2 = new NKActivityIndicator();
                indicator2.init(150, 230, 20, "white");
                indicator2.show();
                indicator2.spin();
                modal2.addControl(indicator2);
                
                var label2 = new NKLabel();                         // Show some text to inform the user
                label2.init(110, 160, 140, 25, "Smaller Modal");    // Set up the label dimensions, placement & text
                label2.setTextColor(255, 255, 255);
                modal2.addControl(label2);
                label2.show();
                
                var button2 = new NKButton();
                button2.init(90, 310, 150, 50, "hideModal2()");     // NKButton to dismiss the modal window
                button2.setTitle("Dismiss Modal");
                modal2.addControl(button2);
                button2.show();
                
                showImage2();
            }
            
            var imageView2;
            function showImage2()                                   // Called from showModal2 function
            {
                imageView2 = new NKImageView();                     // Using an NKImageView to implement the BG Image
                imageView2.init(30, 60, 263, 256, "modalbg.png");   // Define the image we're using
                imageView2.show();                                  // Show the image
            }
            
            function hideImage2()
            {
                imageView2.hide();                                  
            }
            
            function hideModal2()
            {
                modal2.dismiss();                                   // Dismiss the Modal window
                hideImage2();                                       // Call the hideImage2 function function from above
            }
            
            </script>
        
        <div class="greybutton" onClick="showModal1();">Show Example 1</div>
        <div class="greybutton" onClick="showModal2();">Show Example 2</div>
        
        
        <div class="infobox">
            <h1>NKModalWindow</h1>
            <h2>Description</h2>
            <p>This class is used to present modal dialogs and "wait screens" when the user should not access any other controls except those placed on the modal window</p>
            <h2>Usage</h2>
            <p><b>show()</b><br />shows modal window on top of all controls.</p>
            <p><b>dismiss()</b><br />removes modal window from the screen.</p>
            <p><b>addControl()</b><br />adds control to the modal window, can take value of standard NimbleKit controls, like NKActivityIndicator, NKButton, NKLabel, etc.<br />
            <p><b>setAlpha(val)</b><br />sets the opacity of the modal window.</p>
            <p><b>setFrame(x,y,w,h)</b><br />defines the frame size and positioning of the modal window.</p>
        </div>
        
        
    </body>
</html>